//vue 组件  组件不能用驼峰命名
//该组件提供登录相关的基本界面元素  常用的操作

Vue.component("login",{
    template:`
        <span>
            <slot v-if="!myInfo"  name="nologin"  v-bind:v="visible">
                <a href="#" @click.prevent="visible.loginVisible=true">登录</a>
                <a href="#" @click.prevent="visible.regVisible=true">注册</a>
                 <a href="#" @click.prevent="visible.forgetVisible=true">忘记密码</a>
            </slot>
            <slot v-else name="logined" v-bind:myInfo="myInfo">
<!--            TODO   临时用于测试的字段-->
                欢迎 {{myInfo.id}}
                <a href="/logout">退出</a>
            </slot>
            <el-dialog title="登录窗口" :visible.sync="visible.loginVisible">
              <el-form  >
                <el-form-item label="用户名：" label-width="100px">   
                  <el-input v-model="login.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" label-width="100px">
                    <el-input v-model="login.pwd" type="password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="visible.loginVisible = false">取 消</el-button>
                <el-button type="primary" @click="doLogin">确 定</el-button>
              </div>
            </el-dialog>
            
            
             <el-dialog title="注册窗口" :visible.sync="visible.regVisible">
              <el-form  >
                <el-form-item label="用户名：" label-width="100px">   
                  <el-input v-model="reg.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码：" label-width="100px">
                    <el-input v-model="reg.pwd1" type="password" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="确认密码：" label-width="100px">
                    <el-input v-model="reg.pwd2" type="password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="visible.regVisible = false">取 消</el-button>
                <el-button type="primary" @click="doreg">确 定</el-button>
              </div>
            </el-dialog>
            
             <el-dialog title="忘记密码窗口" :visible.sync="visible.forgetVisible">
              <el-form  >
                <el-form-item label="用户名：" label-width="100px">   
                  <el-input v-model="forget.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="验证码：" label-width="100px">
                    <el-input v-model="forget.vcode" type="password" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="新密码：" label-width="100px">
                    <el-input v-model="forget.pwd" type="password" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="visible.forgetVisible = false">取 消</el-button>
                 <el-button type="primary" @click="sendMail1">发送验证邮件1</el-button>
                  <el-button type="primary" @click="sendMail2">发送验证邮件2</el-button>
                <el-button type="primary" @click="resetForgetPwd">修改密码</el-button>
              </div>
            </el-dialog>
            
            
        </span>
    `,
    props:["prefix"],
    //组件内数据模型建议使用函数形式
    data(){
        return {
            myInfo:null,
            visible:{loginVisible: false,
                regVisible: false,
                resetVisible: false,
                forgetVisible: false,
            },
            login:{name:"",pwd:""},
            reg:{name:"",pwd1:"",pwd2:""},
            forget:{name:"",pwd:"",vcode:""}
        }
    },
    created(){
        axios.get(this.prefix+"/myInfo").then(res=>{
            if(res.data.code ==1){
                this.myInfo = res.data.data;
            }
            else{
                this.myInfo = null;
            }
        })

        if(location.search == "?tologin"){
            setTimeout(()=>{
                this.$alert("请先登录");
            },100);
        }

    },
    methods:{
        doLogin(){
            let p =new URLSearchParams();
            p.append("name",this.login.name);
            p.append("pwd",this.login.pwd);
            axios.post(this.prefix+"/login",p).then(res=>{
                if(res.data.code ==1 ){
                    this.myInfo = res.data.data;
                    this.visible.loginVisible =false;
                }
                else{
                    this.$alert(res.data.msg);
                }
            })

        },
        doreg(){
            let p =new URLSearchParams();
            p.append("name",this.reg.name);
            p.append("pwd1",this.reg.pwd1);
            p.append("pwd2",this.reg.pwd2);
            axios.post(this.prefix+"/reg",p).then(res=>{
                if(res.data.code ==1 ){
                    this.$message(res.data.msg);
                    this.visible.regVisible =false;
                }
                else{
                    this.$alert(res.data.msg);
                }

            })

        },
        sendMail1(){
            axios.get(this.prefix+"/sendForgetMail?name="+this.forget.name).then(res=>{
                if(res.data.code ==1){
                    this.$message(res.data.msg);
                }
                else{

                    this.$alert(res.data.msg);
                }
            })
        },
        sendMail2(){
            axios.get(this.prefix+"/sendForgetMail?type=2&name="+this.forget.name).then(res=>{
                if(res.data.code ==1){
                    this.$message(res.data.msg);
                }
                else{

                    this.$alert(res.data.msg);
                }
            })
        },
        resetForgetPwd(){

            let p =new URLSearchParams();
            p.append("name",this.forget.name);
            p.append("pwd",this.forget.pwd);
            p.append("vcode",this.forget.vcode);
            axios.post(this.prefix+"/resetForgetPwd",p).then(res=>{
                if(res.data.code ==1){
                    this.$message(res.data.msg);
                    this.visible.forgetVisible =false;
                }
                else{
                    this.$alert(res.data.msg);
                }
            })
        }

    }

})